<template>
    <div>
        App
        <button @click="handleClick">更新图标大小</button>
        <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
        <div id="main" :style="{ width: mywidth, height: '400px' }"></div>

        <button @click="isCreated = !isCreated">控制子组件是否展示</button>
        <Child v-if="isCreated"></Child>
    </div>
</template>

<script>
import * as echarts from 'echarts';
import Child from './Child.vue';
export default {
    data() {
        return {
            option: {},
            mywidth: "600px",
            isCreated: true
        };
    },
    beforeCreate() {
        console.log("beforeCreate");
        console.log(document.getElementById("main"));
    },
    created() {
        console.log("created");
        console.log(document.getElementById("main"));
        this.option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            xAxis: {
                data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
            },
            yAxis: {},
            series: [
                {
                    name: '销量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                }
            ]
        };
    },
    beforeMount() {
        console.log("beforeMount");
        console.log(document.getElementById("main"));
    },
    mounted() {
        //订阅发布
        //ajax
        //setInterval
        //访问dom
        console.log("mounted");
        console.log(document.getElementById("main"));
        // 基于准备好的dom，初始化echarts实例，挂载到this上，这样其他地方都能用
        this.myChart = echarts.init(document.getElementById('main'));
        // 绘制图表
        this.myChart.setOption(this.option);
    },
    beforeUpdate() {
        console.log("beforeUpdate");
        console.log(document.getElementById("main"));
    },
    //雨露均沾，任何状态值变化都会走到这个生命周期函数，无法做到对某一个状态值变化而更新
    updated() {
        console.log("updated");
        console.log(document.getElementById("main"));
    },

    methods: {
        handleClick() {
            this.mywidth = "800px";
            //执行实际比updated晚，一次性的
            this.$nextTick(() => {
                console.log("nextTick");
                this.myChart.resize();
            });
        }
    },
    components: { Child }
}
</script>